<template>
  <a-modal
    title="修改"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="infoEditVisiable"
  >
    <a-form :form="form">
      <a-row>终端基础信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户编码"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 334px"
              :filter-option="filterOption"
              @focus="selectMchntNo"
              @change="handleChange"
              @select="selected"
              :disabled="true"
              v-decorator="['mchntNo',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in suData" :key="index">
                {{ d.mchntNo }}-{{d.mchntName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="id"
                       v-bind="formItemLayout" style="display: none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='终端打印商户名称'
                       v-bind="formItemLayout">
            <a-input v-decorator="['termPrintMerName',{rules: [{ required: true, message: '必填字段'}]}]"
                     :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端编号"
                       v-bind="formItemLayout">
            <a-input v-decorator="['termNo']" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='收单机构代码'
                       v-bind="formItemLayout">
            <a-input v-decorator="['posInstCd',{rules: [{ required: true, message: '必填字段'}]}]" :disabled="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['termType',{rules: [{ required: true, message: '请选择终端类型' }]}]">
              <a-select-option key="01">传统POS</a-select-option>
              <a-select-option key="02">有线拨号POS</a-select-option>
              <a-select-option key="03">电话POS</a-select-option>
              <a-select-option key="04">智能POS</a-select-option>
              <a-select-option key="05">mPOS</a-select-option>
              <a-select-option key="06">无线POS</a-select-option>
              <a-select-option key="07">mis终端</a-select-option>

            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端厂商"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 334px"
              :filter-option="filterOption"
              @focus="selectBrandCode"
              @search="selectBrandCode"
              v-decorator="['brandCode',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in brandCodeData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端型号"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请输入代码或名称"
              option-filter-prop="children"
              style="width: 334px"
              :filter-option="filterOption"
              @focus="selectByBrandCode"
              @search="selectByBrandCode"
              v-decorator="['modelCode',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in modelCodeData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='维护开始时间'
                       v-bind="formItemLayout">
            <a-date-picker
              placeholder="请选择日期"
              style="width: 334px"
              name="reconFileDate"
              v-decorator="['startTime']"
              format="YYYY-MM-DD HH:MM:SS.MS"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>终端签约信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端交易发起方式"
                       v-bind="formItemLayout">
            <a-radio-group name="radioGroup" v-model="radioVal">
              <a-radio :value="'10'">现场消费</a-radio>
              <a-radio :value="'01'">自助支付</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="条码终端设备类型"
                       v-bind="formItemLayout">
            <a-select
              mode="default"
              :allowClear="true"
              style="width: 100%"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['termDevcTp']">
              <a-select-option key="01">智能 POS</a-select-option>
              <a-select-option key="02">传统 POS (外接扫码/显码设备或内置扫码/显码模块)</a-select-option>
              <a-select-option key="03">收银机(外接扫码/显码设备或内置扫码/显码模块)</a-select-option>
              <a-select-option key="04">自助收银终端(支持扫码或显码功能)</a-select-option>
              <a-select-option key="05">智能移动设备（包含手机、PAD）</a-select-option>
              <a-select-option key="99">其他设备</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-item label="布放实体店地域"
                       :label-col="{span: 4}"
                       :wrapper-col="{span: 20}">
            <a-select
              show-search
              placeholder="省"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectProvince"
              v-decorator="['termAddrPrvnc',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="d in provinceData" :key="d.id">
                {{ d.id }}-{{d.name}}
              </a-select-option>
            </a-select>
            <a-select
              show-search
              placeholder="市"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectCity"
              v-decorator="['termAddrCity',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-for="(d,index) in cityData" :key="d.id">
                {{ d.id }}-{{d.name}}
              </a-select-option>
            </a-select>
            <a-select
              show-search
              placeholder="区"
              option-filter-prop="children"
              style="width: 260px"
              :filter-option="filterOption"
              @focus="selectArea"
              v-decorator="['termAddrArea']"
            >
              <a-select-option v-for="(d,index) in areaData" :key="d.id">
                {{ d.id }}-{{d.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="布放实体店详细地址"
                       v-bind="formItemLayout">
            <a-textarea allow-clear
                        v-decorator="['shopAttr',{rules: [{ required: true, message: '布放实体店详细地址不能为空'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="布放实体店时间"
                       v-bind="formItemLayout">
            <a-date-picker
              placeholder="请选择日期"
              style="width: 334px"
              name="reconFileDate"
              v-decorator="['shoptime',{rules: [{ required: true, message: '必填字段'}]}]"
              format="YYYY-MM-DD HH:MM:SS.MS"/>
          </a-form-item>
        </a-col>
        <!--        {initialValue:!this.model.shoptime?null:moment(moment(this.model.shoptime).format('YYYY-MM-DD HH:MM:SS.MS'))},-->
        <a-col :md="12" :sm="24">
          <a-form-item label="S/N"
                       v-bind="formItemLayout">
            <a-select
              show-search
              placeholder="请选择sn"
              option-filter-prop="children"
              style="width: 334px"
              :filter-option="filterOption"
              @focus="selectBySN"
              :disabled="true"
              v-decorator="['sn',{rules: [{ required: true, message: '必填字段'}]}]"
            >
              <a-select-option v-if="data != null" v-for="(d,index) in snData" :key="d.sn">
                {{ d.sn }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端联系人"
                       v-bind="formItemLayout">
            <a-input v-decorator="['contactName']"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='终端联系电话'
                       v-bind="formItemLayout">
            <a-input
              v-decorator="['contactPhone',{rules: [{ pattern: '^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$', message: '请输入正确的联系电话'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="经度"
                       v-bind="formItemLayout">
            <a-input v-decorator="['longitude',{rules: [{ required: true, message: '必填字段'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='纬度'
                       v-bind="formItemLayout">
            <a-input v-decorator="['latitude',{rules: [{ required: true, message: '必填字段'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="有效半径(单位：千米)"
                       v-bind="formItemLayout">
            <a-input v-decorator="['effectiveRadius',{rules: [{ required: true, message: '必填字段'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'InfoEdit',
    props: {
      infoEditVisiable: {
        default: false
      },
      infoInfoData: {
        require: true
      },
      instId: '',
    },
    data() {
      return {
        data: [],
        radioVal: '',
        suData: [],
        brandCodeData: [],
        modelCodeData: [],
        provinceData: [],
        cityData: [],
        areaData: [],
        snData: [],
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        // firstValue: {},
        info: {
          infoName: '',
          remark: '',
          menuId: ''
        }
      }
    },
    computed: {
      show: {
        get: function () {
          return this.infoEditVisiable
        },
        set: function () {
        }
      }
    },
    mounted() {
      console.log(this.form)
    },

    methods: {
      getMoment(value) {
        return this.$moment(value).format('YYYY-MM-DD HH:MM:SS.MS')
      },

      selectMchntNo() {
        this.suData = []
        this.$get('admin/mcmp/bMchntBaseInfo/getMchntBaseInfo', {instId: this.instId}).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.suData.push(r);
          });
        })
      },
      selected(val) {
        // console.log('標號',val)
        this.form.setFieldsValue({
          mchntNo: this.suData[val].mchntNo,
        })
      },
      handleChange(value) {
        this.form.setFieldsValue({
          // mchntNo: this.suData[value].mchntNo,
          termPrintMerName: this.suData[value].mchntName,
          posInstCd: this.suData[value].signInstId
        })
      },

      selectBrandCode(val) {
        this.brandCodeData = []
        let param = {}
        if (val) {
          param = {
            q: encodeURIComponent(val + `&${this.instId}`),
            pageSize: 20
          }
        } else {
          param = {
            q: encodeURIComponent(`&${this.instId}`),
            pageSize: 20
          }
        }
        this.$get('terminalAdmin/termbrandSelect2List', param).then((r) => {
          let result = r.data.results
          result.forEach(r => {
            this.brandCodeData.push(r);
          })
        })
      },

      selectByBrandCode(val) {
        this.modelCodeData = []
        let brandCode = this.form.getFieldsValue(['brandCode'])
        if (brandCode.brandCode) {
          let param = {}
          if (val) {
            param = {
              q: encodeURIComponent(val + `&${brandCode.brandCode}` + `&${this.instId}`),
              pageSize: 20
            }
          } else {
            param = {
              q: encodeURIComponent(`&${brandCode.brandCode}` + `&${this.instId}`),
              pageSize: 20
            }
          }
          this.$get('modelAdmin/termmodelSelect2List', param).then((r) => {
            let result = r.data.results
            result.forEach(r => {
              this.modelCodeData.push(r);
            })
          })

        } else {
          this.$message.warning('请先选择终端产商')
        }
      },

      selectProvince() {
        this.provinceData = []
        this.cityData = []
        this.form.setFieldsValue({
          termAddrPrvnc: '',
          termAddrCity: '',
          termAddrArea: ''
        })
        this.areaData = []
        let l = '01'
        this.$get('/admin/merParam/regionInfo/select2', {l: l}).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.provinceData.push(r);
          })
        })
      },
      selectCity() {
        this.cityData = []
        this.areaData = []
        this.form.setFieldsValue({
          termAddrCity: '',
          termAddrArea: ''
        })
        let termAddrPrvnc = this.form.getFieldsValue(['termAddrPrvnc'])
        if (termAddrPrvnc.termAddrPrvnc) {
          let l = '02'
          let p = termAddrPrvnc.termAddrPrvnc
          this.$get('/admin/merParam/regionInfo/select2', {l: l, p: p}).then((r) => {
            let result = r.data
            result.forEach(r => {
              this.cityData.push(r);
            })
          })
        }
      },
      selectArea() {
        this.areaData = []
        let termAddrCity = this.form.getFieldsValue(['termAddrCity'])
        if (termAddrCity.termAddrCity) {
          let l = '03'
          let p = termAddrCity.termAddrCity
          this.$get('/admin/merParam/regionInfo/select2', {l: l, p: p}).then((r) => {
            let result = r.data
            result.forEach(r => {
              this.areaData.push(r);
            })
          })
        }
      },

      selectBySN() {
        let instId = this.instId
        this.snData = []
        this.$get('info/getSN', {instId: instId}).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.snData.push(r);
          })
        })
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },

      reset() {
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          // console.log(this.info,'==========')
          if (!err) {
            // console.log(this.info,'-----------------')
            this.setInfoFields()
            this.loading = true
            this.info.instId = this.instId
            this.info.optFlag = 'upd'
            // console.log(this.info, '678')
            this.info.startTime = this.getMoment(this.info.startTime)
            this.info.shoptime = this.getMoment(this.info.shoptime)

            this.info.brandCode = this.info.brandCode.substr(0, 8)
            this.info.modelCode = this.info.modelCode.substr(0, 8)
            this.info.termAddrPrvnc = this.info.termAddrPrvnc.substr(0, 6)
            this.info.termAddrCity = this.info.termAddrCity.substr(0, 6)
            if (this.info.termAddrArea) {
              this.info.termAddrArea = this.info.termAddrArea.substr(0, 6)
            }
            this.info.termTxnStarWay = this.radioVal
            // console.log(this.info)
            this.$put('info', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })

      },

      setInfoFields() {

        let values = this.form.getFieldsValue(['id', 'mchntNo', 'termPrintMerName', 'termNo', 'posInstCd', 'termType',
          'brandCode', 'modelCode', 'startTime', 'radioGroup', 'termDevcTp', 'termAddrPrvnc', 'termAddrCity', 'termAddrArea',
          'shopAttr', 'shoptime', 'sn', 'shopAttr', 'contactName', 'contactPhone', 'longitude', 'latitude', 'effectiveRadius'])
        if (typeof values !== undefined) {
          Object.keys(values).forEach(_key => {
            this.info[_key] = values[_key]
          })
        }
      },


      setInfoFormValues({...info}) {
        let fields = ['id', 'mchntNo', 'termPrintMerName', 'termNo', 'posInstCd', 'termType', 'brandCode',
          'modelCode', 'startTime', 'radioGroup', 'termDevcTp', 'termAddrPrvnc', 'termAddrCity', 'termAddrArea',
          'shopAttr', 'shoptime', 'sn', 'shopAttr', 'contactName', 'contactPhone', 'longitude', 'latitude', 'effectiveRadius']
        this.radioVal = info.termTxnStarWay
        Object.keys(info).forEach((key) => {
          if (fields.indexOf(key) !== -1) {
            this.form.getFieldDecorator(key)
            let obj = {}
            obj[key] = info[key]
            this.form.setFieldsValue(obj)
          }
        })
      },
    },

  }
</script>

